<script lang="ts">
import { defineComponent } from "vue";

import MediaProgress from "@/components/media/progress.vue";

export default defineComponent({
  components: { MediaProgress },
  props: {
    info: { type: Object, required: true },
    currentTime: String,
    percent: Number,
  },
});
</script>

<template>
  <view class="explain-card">
    <image class="explain-card-bg" src="/static/square-explain-listen.png" />
    <view class="explain-card-name">{{ info.name }}</view>
    <view style="display: flex; align-items: center">
      <image
        class="explain-card-avatar"
        :src="info.avatar_url"
        mode="aspectFill"
      />
      <view class="explain-card-guider">{{ info.fullname }}</view>
      <view class="explain-card-tag">{{ info.tags }}</view>
    </view>
    <view class="explain-card-content">
      <view style="flex-grow: 1; min-width: 0">
        <view class="explain-card-progress">
          <MediaProgress :modelValue="percent" />
        </view>
        <view class="explain-card-time">
          <text>{{ currentTime }}</text>
          <text style="margin-left: auto">{{ info.audio_time }}</text>
        </view>
      </view>

      <slot />
    </view>
  </view>
</template>

<style lang="scss">
.explain-card {
  .explain-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 150rpx;
    height: 150rpx;
  }

  .explain-card-name {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #2d2d2d;
    line-height: 40rpx;
    font-weight: bold;
  }

  .explain-card-avatar {
    flex-shrink: 0;
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
  }

  .explain-card-guider {
    min-width: 0;
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #692e00;
    line-height: 40rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .explain-card-tag {
    flex-shrink: 0;
    margin-left: 14rpx;
    padding: 0 8rpx;
    font-size: 22rpx;
    color: #ac793a;
    line-height: 28rpx;
    border-radius: 8rpx;
    border: 2rpx solid rgba(155, 78, 78, 0.2);
  }

  .explain-card-content {
    display: flex;
    align-items: center;
    height: 104rpx;
    padding-left: 26rpx;
    padding-right: 20rpx;
    margin-top: 26rpx;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .explain-card-progress {
    padding-top: 16rpx;
    margin-bottom: 14rpx;
  }

  .explain-card-time {
    display: flex;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }
}
</style>